<template>
      <div class="com-container " @dblclick="revetMap">
        <div class="com-chart maps" ref='map_ref'></div>
    </div>
</template>

<script>
import {getProvinceMapInfo} from '../utils/map_utils'
import { mapState } from 'vuex'


export default {
    name:'maps',
      data() {
        return {
            chartsInstance:null,
            allData:null,
            mapDtata:{} // 所有省份数据地图缓存
        }
    },
    created() {
        this.$socket.registerCallBack('mapData', this.getData) 
    },
    mounted() {
        this.initCharts()
        // this.getData()
    },
    beforeDestroy() {
        window.removeEventListener('resize',this.screenAdapter)
        this.$socket.unregisterCallBack('mapData') 
    },
    computed:{
     ...mapState('theme')
    },
    methods: {
       async initCharts(){
             // 请求数据
            const {data:res} = await this.$http.get('map/china')
            this.$echarts.registerMap('chinaMap',res)
            this.chartsInstance = this.$echarts.init(this.$refs.map_ref,'chalk')
            const initOpt={
              title:{
                    text:'商家分布'
                },
              geo:{
                  type:'map',
                  map:'chinaMap',
                  top:'5%',
                  botton:'5%',
                  itemStyle:{
                      areaColor:'#2E72BF',
                      borserColor:'#333'
                  }
              },
              legend:{
                  left:'5%',
                  bottom:'5%',
                  orient:'vertocal' // 图例排列 从上往下
              }
            }
            this.chartsInstance.setOption(initOpt)
            this.sendGet()
            // 监听地图点击
            this.chartsInstance.on('click',async (arg)=>{
               let provinceInfo = getProvinceMapInfo(arg.name)
               // 获取点击省份数据
               if(!this.mapDtata[provinceInfo.key]){
                   const {data:res} = await this.$http.get(provinceInfo.path)
                   this.mapDtata[provinceInfo.key] = res
                    // 注册地图
                   this.$echarts.registerMap(provinceInfo.key,res)
               }
               const changeOpt={
                   geo:{
                    map:provinceInfo.key
                   }
               }
               this.chartsInstance.setOption(changeOpt)
            })
            // 自适应
             window.addEventListener('resize',this.screenAdapter)
             this.screenAdapter()
        },
        // 发送socket请求
        sendGet(){
             this.$socket.send({
                action:'getData',
                socketType:'mapData',
                chartName:'map',
                value:''
            })
        },
        getData(res){
            //  const {data:res} = await this.$http.get('map')
             this.allData = res
          
            // 更新
            this.updateCharts()
        },
        updateCharts(){
            // 如果想在地图中使用散点 必须配置coordinateSystenm'geo'
             let seriesArr = this.allData.map(v=>{
                 return {
                     type:'effectScatter',
                     rippleEffect:{ // 涟漪动画设置
                         scale:5,  // 大小
                         brushType:'stroke' // 空心涟漪动画
                     },
                     name:v.name,
                     data:v.children,
                     coordinateSystem:'geo'
                 }
             })
             //图例数据
             let legendArr = this.allData.map(v=>{
                 return v.name
             })
          

             const dataOpt={
                 legend:{
                     data:legendArr
                 },
                 series:seriesArr
            }
            
            this.chartsInstance.setOption(dataOpt)
        },
        screenAdapter(){
            // 屏幕适配
            const titleFontSize = this.$refs.map_ref.offsetWidth/100*3
            const adapterOpt={
              title:{
                 textStyle:{
                     fontSize : titleFontSize
                 }
              },
                legend:{
                     itemWidth:titleFontSize/2,
                     itemHeight:titleFontSize/2,
                     textStyle:{
                     fontSize : titleFontSize/2
                     }
                 }
            }
            this.chartsInstance.setOption(adapterOpt)
            this.chartsInstance.resize()
        },
        revetMap(){
            // 返回中国地图
            const remetOpt={
                geo:{
                    type:'map',
                    map:'chinaMap'
                }
            }
            this.chartsInstance.setOption(remetOpt)
        }
    },
      watch:{
        theme(){
            console.log('主题切换了');
            this.chartInstance.dispose() // 销毁图表对象
            this.initCharts() // 初始化图表对象
            this.screenAdapter() // 屏幕适配
            this.updateCharts() // 跟新图表
        }
    }
}
</script>

<style  lang='less' scoped>

</style>